<template>
    <div class="container">
        <div class="model">
            <div class="model_content">
                <h2>热门车型</h2>
                <div class="title">
                    <router-link tag="a" :to="'/pagetwo?id=' + item.carid" href="" v-for="item in lovecar"
                        :key="item.carid">
                        {{ item.carname }}</router-link>
                 
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getLoveCar } from "../api/lovecar.js"
export default {
    name: "ModEls",
    data() {
        return {
            lovecar: null,
        }
    },
    
    created() {
        getLoveCar().then(data=>{
                console.log(data);
                this.lovecar = data.lovecar;
            
            })
    }
}
</script>

<style lang="scss" scoped>
.model {
    width: 100%;

    .model_content {
        width: 90%;
        height: 250px;
        margin: 0 auto;

        .title {
            width: 100%;
            height: 218px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            a {
                height: 40px;
                background-color: #f5f5f7;
                border-radius: 20px;
                margin-right: 10px;
                text-align: center;
                line-height: 40px;
                font-size: 12px;
                padding: 0 18px;
                margin-top: 12px;
            }
        }
    }
}
</style>